﻿@namespace MudBlazor.Docs.Examples

<MudPaper Class="doc-section-component-container">
    <MudTimeSeriesChart ChartSeries="@_series"
                        @bind-SelectedIndex="_index"
                        Width="@_width"
                        Height="@_height"
                        ChartOptions="@_options"
                        AxisChartOptions="@_axisChartOptions"
                        CanHideSeries="true"
                        TimeLabelSpacing="TimeSpan.FromMinutes(5)"
                        TimeLabelSpacingRounding="_roundedLabelSpacing"
                        TimeLabelSpacingRoundingPadSeries="_roundedLabelSpacingPadSeries"
                        DataMarkerTooltipTimeLabelFormat="yyyy MMM dd HH:mm:ss" />
</MudPaper>

<MudGrid>
    <MudItem md="6" xs="12">
        <MudText Typo="Typo.body1" Class="py-3">Selected: @(_index < 0 ? "None" : _series[_index].Name)</MudText>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudSlider @bind-Value="_options.LineStrokeWidth" Min="1" Max="10">Line Width: @_options.LineStrokeWidth.ToString()</MudSlider>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudCheckBox @bind-Value="_roundedLabelSpacing" Color="Color.Primary" Label="TimeLabelSpacing Rounding"></MudCheckBox>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudTextField @bind-Value="_width" Label="Chart Width"></MudTextField>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudCheckBox @bind-Value="_roundedLabelSpacingPadSeries" Color="Color.Primary" Label="TimeLabelSpacing Rounding - Pad Series"></MudCheckBox>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudTextField @bind-Value="_height" Label="Chart Height"></MudTextField>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudCheckBox @bind-Value="_axisChartOptions.MatchBoundsToSize" Color="Color.Primary" Label="MatchBoundsToSize"></MudCheckBox>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudStack>
            <MudText Typo="Typo.body1">XAxis Label Rotation</MudText>
            <MudSlider @bind-Value="_axisChartOptions.XAxisLabelRotation" Min="0" Max="90" Step="15"></MudSlider>
        </MudStack>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudCheckBox T="bool" ValueChanged="(v)=> _series.ForEach(x => x.ShowDataMarkers = v)" Color="Color.Primary" Label="Show Data Markers"></MudCheckBox>
    </MudItem>
</MudGrid>

@code
{
    private int _index = -1; //default value cannot be 0 -> first selectedindex is 0.
    private ChartOptions _options = new ChartOptions
        {
            YAxisLines = false,
            YAxisTicks = 500,
            MaxNumYAxisTicks = 10,
            YAxisRequireZeroPoint = true,
            XAxisLines = false,
            LineStrokeWidth = 1,
        };

    private AxisChartOptions _axisChartOptions = new() { };

    private TimeSeriesChartSeries _chart1 = new();
    private TimeSeriesChartSeries _chart2 = new();
    private TimeSeriesChartSeries _chart3 = new();

    private List<TimeSeriesChartSeries> _series = new();

    private readonly Random _random = new Random();

    private bool _roundedLabelSpacing = false;
    private bool _roundedLabelSpacingPadSeries = false;

    private string _width = "650px";
    private string _height = "350px";

    protected override void OnInitialized()
    {
        base.OnInitialized();

        var now = DateTime.Now;
        _chart1 = new TimeSeriesChartSeries
            {
                Index = 0,
                Name = "Series 1",
                Data = Enumerable.Range(-360, 360).Select(x => new TimeSeriesChartSeries.TimeValue(now.AddSeconds(x * 10), _random.Next(6000, 15000))).ToList(),
                IsVisible = true,
                LineDisplayType = LineDisplayType.Line,
                DataMarkerTooltipTitleFormat = "{{X_VALUE}}",
                DataMarkerTooltipSubtitleFormat = "{{Y_VALUE}}"
            };

        _chart2 = new TimeSeriesChartSeries
            {
                Index = 1,
                Name = "Series 2",
                Data = Enumerable.Range(-360, 360).Select(x => new TimeSeriesChartSeries.TimeValue(now.AddSeconds(x * 10), _random.Next(0, 7000))).ToList(),
                IsVisible = true,
                LineDisplayType = LineDisplayType.Area,
                DataMarkerTooltipTitleFormat = "{{X_VALUE}}",
                DataMarkerTooltipSubtitleFormat = "{{Y_VALUE}}"
            };

        _chart3 = new TimeSeriesChartSeries
            {
                Index = 2,
                Name = "Series 3",
                Data = Enumerable.Range(-90, 60).Select(x => new TimeSeriesChartSeries.TimeValue(now.AddSeconds(x * 30), _random.Next(4000, 10000))).ToList(),
                IsVisible = true,
                LineDisplayType = LineDisplayType.Line,
                DataMarkerTooltipTitleFormat = "{{X_VALUE}}",
                DataMarkerTooltipSubtitleFormat = "{{Y_VALUE}}"
            };

        _series.Add(_chart1);
        _series.Add(_chart2);
        _series.Add(_chart3);

        StateHasChanged();
    }
}
